<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/queryloader2.min.js"></script>
		
		<style>
			body {
			    background: url(img/hb-bg.jpg) no-repeat left top;
			    background-size: 100% auto;
			    background-color: #dd3535;
			}
			body{
				position: relative;
			}
		</style>
		<script>
		   var index=0;
			$(function(){
				$(".question01").find("input").bind("click",function(){
					if(index==0){
						$("#car").attr("class","a_sation1");
						index=1;
					}
				});
				$(".question02").find("input").bind("click",function(){
					if(index==1){
						$("#car").attr("class","a_sation2");
						index=2;
					}
				});
				$(".question03").find("input").bind("click",function(){
					if(index==2){
						$("#car").attr("class","a_sation3");
						index=3;
					}
				});
				$(".question04").find("input").bind("click",function(){
					if(index==3){
						$("#car").attr("class","a_sation4");
						index=4;
					}
				});
			});
		</script>
	</head>
	<body>
		<div class="hb-container" id="preload">
			<div class="bg"></div>
			<img src="img/car.png" id="car" alt="car"/>
			<div class="question question01">
				<h3>您的车平时停在哪里?</h3>
				<ul>
					<li>
						<input type="checkbox" /><span>马路边</span>
					</li>
					<li>
						<input type="checkbox" /><span>小区内</span>
					</li>
					<li>
						<input type="checkbox" /><span>写字楼停车场</span>
					</li>
				</ul>
			</div>
			
			<div class="question question02">
				<h3>您购买车位的心理预期价格是多少?</h3>
				<ul>
					<li>
						<input type="checkbox" /><span>10-13万元</span>
					</li>
					<li>
						<input type="checkbox" /><span>14-18万元</span>
					</li>
					<li>
						<input type="checkbox" /><span>18万元以上</span>
					</li>
				</ul>
			</div>
			
			<div class="question question03">
				<h3>若购买车位,您希望首付是多少万?</h3>
				<ul>
					<li>
						<input type="checkbox" /><span>0首付</span>
					</li>
					<li>
						<input type="checkbox" /><span>3万元首付</span>
					</li>
					<li>
						<input type="checkbox" /><span>5万元首付</span>
					</li>
					<li>
						<input type="checkbox" /><span>8万元首付</span>
					</li>
				</ul>
			</div>
			
			<div class="question question04">
				<h3>若给您0利息分期的权利,<br />您的分期希望是多久?</h3>
				<ul>
					<li>
						<input type="checkbox" /><span>1年</span>
					</li>
					<li>
						<input type="checkbox" /><span>2年</span>
					</li>
					<li>
						<input type="checkbox" /><span>3年</span>
					</li>
					<li>
						<input type="checkbox" /><span>5年</span>
					</li>
				</ul>
			</div>
			
			<div class="submit">
				<a href="#" onclick="$('.cover').show();">提交</a>
			</div>	
		</div>
		<!--
        	作者：245848724@qq.com
        	时间：2015-10-22
        	描述：hb-container end
        -->
		
		<div class="cover" style="display: none;">
			<div class="join-container">
				<div class="join_body">
					<img src="img/join-bg.png" alt="join-bg" /> 
					<div class="hdgz-pop-box">
				        <div class="hdgz-pop-close">
				            <b></b>
				        </div>				        
				        <div class="hdgz-pop-content">	     
							<div class="prompt">
								填写姓名、电话，
								<br />
								<em>3000元</em>现金抵用券，只差最后一步！
								<br />
								<small>（限量发送100份！先到先得，送完为止！）</small>
							</div>
							<div class="form">姓名<input type="text" /></div>
							<div class="form">电话<input type="text" /></div>
							<p>
								*请留下您的电话，便于工作人员联系您！
								<br />
								*个人信息仅用作后期联系，我们会保密的哦！
							</p>
				        </div>
				        <img src="img/join-bg01.png" alt="join-bg01" />
			    	</div>			    	
				</div>
				<a href='#' id="submit" onclick="$('.cover_box').show();" ><img src="img/tj.png" alt="tj"/></a>
			</div>
		</div>		
		
		<div class="cover_box" style="display:none;" onclick="$(this).hide();">
			<div class="success-container">
				<div class="success-body">
					<p>提交成功!</p>
					<img src="img/quan.png" alt="quan" />
					<div class="content">
						恭喜你！获得3000元车位现金抵用券，
						<br />
						可在购买车位时直接使用哦！
					</div>
				</div>
				<img src="img/bg.png" alt="bg" />
			</div>
		</div>
		
		
		<script>
			$("body").queryLoader2({
				barColor: "#efefef",
				backgroundColor: "#111",
				percentage: true,
				barHeight: 1,
				minimumTime: 200,
				fadeOutTime: 1000,
				onComplete: function() {
					$("#preload").show();
				    $(".cover").bind("click",function(){
				    	$(this).hide();
				    });
				    $(".hdgz-pop-content").bind("click",function(e){
				    	e.stopPropagation();
				    });
				      $("#submit").bind("click",function(e){
				    	e.stopPropagation();
				    });
				}
			});
		</script>
	</body>
</html>